<!-- 论文成绩管理-->
<template>
  <div class="contenBox">
    <div class="leftTree">
      <!-- <Tree :data="treeData" @getLeftTree="getLeftTree"></Tree> -->
      <el-tree
        :data="treeData"
        :highlight-current="true"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="rightContent">
      <div class="rightTop">
        <el-card class="box-card">
          <el-form
            ref="form"
            :model="formSearch"
            label-width="40px"
            :inline="true"
          >
            <el-form-item label="姓名">
              <el-input
                v-model="formSearch.studentName"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select
                class="select"
                v-model="formSearch.gender"
                placeholder="请选择性别"
              >
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
                <el-option label="未知" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学年学期" label-width="70px">
              <el-select
                class="select"
                v-model="formSearch.stuend"
                placeholder="请选择性别"
              >
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
                <el-option label="未知" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="论文方向" label-width="70px">
              <el-select
                class="select"
                v-model="formSearch.subject"
                placeholder="补考科目"
              >
                <el-option
                  v-for="item in xueke"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="search">
                <span
                  class="icon iconfont icon-chaxun"
                  style="font-size: 12px; font-weight: bold"
                  >查询</span
                >
              </el-button>
              <el-button size="small" @click="reset" icon="el-icon-refresh"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <div class="rightBottom">
        <el-card class="box-card">
          <div class="bottomHeader">
            <span class="title">管理列表</span>
            <div class="bottomHeaderBtn">
              <el-button
                size="small"
                type="primary"
                plain
                @click="goAddExamAttend"
              >
                新增
              </el-button>
              <!-- <el-button
                size="small"
                type="primary"
                plain
                @click="goSetExamAttend"
              >
                导入
              </el-button> -->
              <el-upload 
                class="upload-demo"
              name="file" action="action" 
              :show-file-list="false" 
              :http-request="fileChange"
              >
               <el-button
                size="small"
                type="primary"
                plain
              >
                导入
              </el-button>
          </el-upload>
            </div>
          </div>
          <el-table
            :data="tableData"
            border
            style="width: 100%; min-height: 440px"
          >
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="studentName" label="学生姓名">
            </el-table-column>
            <el-table-column label="性别">
              <template slot-scope="scope">
                <span>{{ scope.row.gender == 0 ? "男" : "女" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="subject" label="学年学期"> </el-table-column>
            <el-table-column prop="score" label="论文方向"> </el-table-column>
            <el-table-column prop="scoreSub" label="论文成绩">
            </el-table-column>
            <el-table-column prop="scoreNewSub" label="最终成绩">
            </el-table-column>
            <el-table-column label="操作" width="160">
              <template slot-scope="scope">
                <el-button type="text" @click="setBtn" size="small"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  @click="computerBtn(scope.row.id)"
                  size="small"
                  >计算</el-button
                >
                <el-button type="text" @click="open" size="small"
                  >发布</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="dialogData"
        class="dialogForm"
        ref="form"
        :rules="rules"
        label-width="120px"
        :inline="true"
      >
        <el-form-item label="学生姓名" prop="studentName">
          <el-input
            v-model="dialogData.studentName"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="studentStend">
          <el-select
            class="select"
            placeholder="请选择性别"
            v-model="dialogData.studentStend"
          >
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
            <el-option label="未知" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学年学期" label-width="120px" prop="studentNumber">
          <el-select
            class="select"
            v-model="dialogData.studentNumber"
            placeholder="请输入学期"
          >
            <el-option label="未知" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="论文方向" label-width="120px" prop="studentNumber">
          <el-select
            class="select"
            v-model="dialogData.studentNumber"
            placeholder="论文方向"
          >
            <el-option label="未知" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="论文成绩" prop="paperReport">
          <el-input
            v-model="dialogData.paperReport"
            placeholder="请输入成绩"
          ></el-input>
        </el-form-item>
        <el-form-item label="最终成绩" prop="roportEnd">
          <el-input
            v-model="dialogData.roportEnd"
            placeholder="请输入成绩"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import { colleageTreeDataApi } from "@/api/basics/college.js";
import { getClassifyTreeListApi } from "@/api/basics/classify";
export default {
  data() {
    return {
      // 左侧树模拟数据
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      dialogData: {}, // 弹框内容
      dialogVisible: false, // 弹出层显示
      dialogTitle: "新增", // 弹窗标题
      //搜索
      formSearch: {},
      //表格数据
      tableData: [
        {
          studentName: "王文博",
          gender: '0',
          subject: "第一学期",
          score: "计算机",
          scoreSub: "68",
          scoreNewSub: "80",
        },
        {
          studentName: "田志龙",
          gender: '1',
          subject: "第二学期",
          score: "计算机",
          scoreSub: "80",
          scoreNewSub: "88",
        },
      ],
      //分页
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0, //总条数,
      sex: [],
      xueke: [],
      rules: {
        studentName: [
          { required: true, message: "此为必填项", trigger: "blur" },
        ],
        studentStend: [
          { required: true, message: "此为必填项", trigger: "blur" },
        ],
        studentNumber: [
          { required: true, message: "此为必填项", trigger: "blur" },
        ],
        paperReport: [
          { required: true, message: "此为必填项", trigger: "blur" },
        ],
        roportEnd: [
          { required: true, message: "此为必填项", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.upDateTree();
    getClassifyTreeListApi().then((res) => {
      console.log(res);
      this.xueke = res.data[8].children;
      console.log(this.sex, "sex", this.xueke, "xueke");
    });
  },
  methods: {
    //导入
    // fileChange(files){
    //   let formData = new FormData(); 
    //     console.log(formData);
    //     console.log(123123123);
    //     formData.append('file', files.file);
    //     ImportenrollmentApi(formData).then((res) => {
    //         console.log(res);
    //         if(res.code === 200) {
    //           this.$message({
    //             type: 'success',
    //             message: '导入成功',
    //           });
    //           this.getEnrollmentList()
    //         }
    //     });
    // },
    // 表格新增功能
    goAddExamAttend() {
      this.dialogVisible = true;
    },

    // 表格录入功能
    goSetExamAttend() {
      
    },

    upDateTree() {
      colleageTreeDataApi()
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.treeData = res.data;
          } else {
            this.$message.error("数据获取失败,请稍后重试", res.msg);
          }
        })
        .catch(() => {});
    },
    //点击左侧树的事件
    handleNodeClick(data) {
      console.log(data);
      this.performanceList({ college: data.id });
    },
    //分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.performanceList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.performanceList();
    },
    //搜索
    search() {
      this.performanceList(this.formSearch);
      console.log(this.formSearch);
    },
    //重置
    reset() {
      this.formSearch = {};
      this.performanceList();
    },
    // 点击编辑按钮
    setBtn() {
      this.dialogVisible = true;
      this.dialogTitle = "编辑";
    },
    // 点击发布
    open() {
      this.$confirm("是否发布到学生端", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then((code) => {
          console.log(code);
          this.$message({
            type: "success",
            message: "发布成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消发布",
          });
        });
    },
    // 点击计算按钮
    computerBtn(id) {
      console.log(id);
    },
  },
};
</script>
  <style lang="scss" scoped>
.box-card {
  .bottomHeader {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 0 30px;
    .title {
      color: #65a6e0;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
.dialogForm {
  .el-form-item {
    .el-input {
      width: 220px;
    }
  }
}
.contenBox {
  // min-width: calc(100vh - 200px);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f3f2f7;
  padding: 0 20px 20px 15px;
  box-sizing: border-box;

  .leftTree {
    width: 250px;
    // height: 100%;
    // overflow-y: auto;
    // min-height:calc(100vh - 95px);
    background-color: #fff;
    // padding: 15px 15px;
    border-radius: 5px;
    box-sizing: border-box;
    ::v-deep .el-tree {
      width: 250px;
    }
    ::v-deep .el-tree > .el-tree-node .el-tree-node__content {
      height: 56px;
      position: relative;
      .el-tree-node__expand-icon {
        position: absolute;
        right: 0;
        bottom: 14px;
        transform: rotate(-90deg);
        font-size: 18px;
      }
      .el-tree-node__label {
        font-size: 16px;
        margin-left: 10px;
      }
      .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
      }

      .el-icon-caret-right:before {
        content: "\e6df";
      }
    }

    ::v-deep.el-menu {
      border: none;
    }
  }

  .rightContent {
    flex: 1;
    min-width: calc(100vh - 250px);
    // width: 100%;
    margin-left: 15px;
    padding-right: 10px;
    // background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;

    .rightTop {
      width: 100%;
      .el-card {
        height: 100%;

        .el-select {
          width: 140px;
        }
      }
    }

    .rightBottom {
      margin-top: 20px;
      box-sizing: border-box;
      // height: 400px;
      // overflow-y: auto;

      .edit {
        cursor: pointer;
        margin-right: 15px;
      }
      .del {
        cursor: pointer;
      }

      .pagination {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-top: 20px;
        margin-right: 20px;

        .jumper {
          font-size: 14px;
          margin-left: 20px;
          margin-right: 10px;
          display: flex;
          align-items: center;
        }

        ::v-deep .btn-prev,
        ::v-deep .btn-next,
        button {
          height: 28px;
          line-height: 28px;
          border-radius: 5px;
          font-size: 14px;
          padding: 0 8px;
          border: solid 1px #e6e6e6;
        }

        .submit {
          color: #fff;
          background-color: #4895db;
          border: solid 1px #4895db;
        }
      }
    }
  }
}
.bottomHeaderBtn{
  display: flex;
}
.box-card {
  .el-form {
    .el-form-item {
      margin-bottom: 0;
      .select {
        width: 120px !important;
      }
      .el-input {
        width: 130px;
      }
    }
  }
}
.page {
  width: 94%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
  
  